<template>
  <div class="relative w-full h-full">
    <PageHeader :title="$t('goods_list.菜品管理')" />
    <SearchCom
      :searchList="searchList"
      @search="handleSearch"
      @reset="handleReset"
    />
    <div class="mt12 toolbar flex_aic" v-my-point="'sku:add'">
      <div class="addBtn flex_aic_jcc" @click="handleRelease()">
        <SvgIcon name="iconxinzeng" color="rgb(24, 144, 255)" class="mr8" />
        <span>{{ $t("goods_list.发布菜品") }}</span>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      class="cover-table mt12"
      height="calc(100% - 220px)"
      row-key="id"
      @selection-change="handleSelectionChange"
      border
      v-loading="loading"
    >
      <el-table-column type="selection" :selectable="selectable" width="55" />
      <el-table-column :label="$t('goods_list.序号')" type="index" width="80" />
      <el-table-column
        prop="name"
        :label="$t('goods_list.菜品信息')"
        width="500"
      >
        <template #default="scope">
          <div class="flex">
            <el-popover placement="right" width="226" trigger="hover">
              <div
                class="bigImg"
                :style="{ 'background-image': `url(${scope.row.coverImage})` }"
              ></div>
              <template #reference>
                <div
                  class="goodImg"
                  :style="{
                    'background-image': `url(${scope.row.coverImage})`,
                  }"
                ></div>
              </template>
            </el-popover>

            <div class="ml10 flex_fdc_jcsb text-left">
              <div class="color-333333 line-2">
                {{ scope.row["name" + locale] }}
              </div>
              <div class="color-666666 fs-12">
                <div class="line-1">
                  {{ scope.row["skuClassify1Name" + locale] }}
                </div>
                <div class="line-1">
                  {{ $t("goods_list.所属商户") }}：{{
                    scope.row["tenantName" + locale] || "--"
                  }}
                </div>
                <div class="line-1">
                  {{ $t("goods_list.商户ID") }}：{{
                    scope.row.tenantId || "--"
                  }}
                </div>
                <div class="line-1">
                  {{ $t("goods_list.商户联系方式") }}：{{
                    scope.row.tenantServicePhone || "--"
                  }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('goods_list.菜品价格')">
        <template #default="scope">
          {{ scope.row.minPrice }}{{ $t("currency.￥") }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('goods_list.菜品描述')">
        <template #default="scope">
          {{ scope.row["description" + locale] }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('goods_list.发布时间')">
        <template #default="scope">
          {{ moment(scope.row.createdTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('goods_list.操作')" width="300">
        <template #default="scope">
          <div class="operationBtnRow">
            <el-button
              type="text"
              size="small"
              @click="handleEdit(scope.row)"
              v-my-point="'sku:edit'"
              >{{ $t("goods_list.编辑") }}</el-button
            >
            <el-popconfirm
              :title="t('goods_list.确定删除吗')"
              @confirm="handleDelete([scope.row.id])"
              :confirm-button-text="t('goods_list.确定')"
              :cancel-button-text="t('goods_list.取消')"
              width="300px"
            >
              <template #reference>
                <el-button
                  class="ml0"
                  type="text"
                  size="small"
                  v-my-point="'sku:del'"
                  >{{ t('goods_list.删除') }}</el-button
                >
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-end mt24 absolute bottom-0 right-0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <ReleaseDialog v-model:show="showReleaseDialog" :id="editItem.id" @success="releaseSuccess" />
  </div>
</template>
<script setup>
import { ref, onMounted, computed, watchEffect } from "vue";
import SearchCom from "@/components/SearchCom.vue";
import { useTableMixin } from "@/utils/tableMixin";
import Api from "@/config/api/api";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import ReleaseDialog from "./release/index.vue";
import moment from "moment";
import { ElMessage } from "element-plus";

const router = useRouter();
const { t, locale } = useI18n();
const showReleaseDialog = ref(false);
const editItem = ref({});
const searchList = ref();
watchEffect(() => {
  searchList.value = [
    {
      label: t("goods_list.菜品名称"),
      key: "name",
      type: "input",
    },
    {
      label: t("goods_list.发布时间"),
      key: "date",
      type: "daterange",
    },
    { 
      label: t("goods_list.商户ID"),
      key: "tenantId",
      type: "input",
      maxLength: 19
    },
    {
      label: t("goods_list.商户名称"),
      key: "tenantName",
      type: "input",
    },
    {
      label: t("goods_list.商户联系方式"),
      key: "tenantServicePhone",
      type: "input",
    },
  ];
});

const fetchMessages = (params) => {
  // 添加语言参数
  return Api.sku_list({
    page: params.page,
    size: params.size,
    ["name" + locale.value]: params.name,
    lastOnTimeStart: params.date?.[0]
      ? moment(params.date[0]).format("YYYY-MM-DD 00:00:00")
      : "",
    lastOnTimeEnd: params.date?.[1]
      ? moment(params.date[1]).format("YYYY-MM-DD 23:59:59")
      : "",
    skuClassify1Id: params.skuClassify1Id || "",
    tenantId: params.tenantId || "",
    ['tenantName' + locale.value]: params.tenantName || "",
    tenantServicePhone: params.tenantServicePhone || "",
  });
};

const {
  currentPage,
  pageSize,
  total,
  tableData,
  loading,
  getDataList,
  handleSizeChange,
  handleCurrentChange,
  handleSearch,
  handleReset,
} = useTableMixin(fetchMessages);

const handleRelease = () => {
  showReleaseDialog.value = true;
  editItem.value = {};
};

const handleEdit = (row) => {
  showReleaseDialog.value = true;
  editItem.value = row;
};

// 删除商品
const handleDelete = (ids) => {
  Api.sku_delete(ids).then((res) => {
    if (res.status === 200) {
      ElMessage.success(t('goods_list.删除成功'));
      getDataList();
    }
  });
};

const getSkuClassify = () => {
  Api.getSkuClassify({}).then((res) => {
    searchList.value[2].options = res.data.content?.map((v) => ({
      ...v,
      value: v.id,
    }));
  });
};

const releaseSuccess = () => {
  handleReset();
};

onMounted(() => {
  getSkuClassify();
});
</script>
<style lang="scss" scoped>
.toolbar {
  width: 100%;
  height: 42px;
  margin-bottom: 5px;
  background: rgba(24, 144 ,255, 0.1);
}
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
.split {
  width: 1px;
  height: 12px;
  background: #ddd;
  margin: 0 5px;
}

.goodImg {
  display: inline-block;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border: 1px solid #e2e5f6;
  border-radius: 3px;
  background: #f8f8f8;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.bigImg {
  display: inline-block;
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  overflow: hidden;
  // border: 1px solid #e2e5f6;
  // border-radius: 3px;
  // background: #f8f8f8;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
</style>
